<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DEMO</title>
    <style>
        #app {
            font-size: 20px;
            min-width: 640px;
        }
        header {
            height: 100px;
            background-color: rgb(92, 86, 83);
        }
        header audio {
            opacity: 0;
        }
        main ul {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
        }
        main ul li {
            width: 100px;
            height: 500px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            margin-right: 10px;
            text-align: center;
        }
        main ul li div {
            padding: 30px 0px;
        }
        main ul li div:first-child {
            font-size: 40px;
            font-weight: bold;
        }
        main ul li.active {
            background-color: deepskyblue;
            color: #fff;
        }
    </style>
</head>
<body>

   <div id="app">
         <header>
            <audio src="" class="audio" preload="metadata"></audio>
			<p>按下键盘对应数字即可弹奏</p>
         </header>
         <main>
             <ul class="ul">
                <!-- <li></li>
                <li class=""></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li> -->
             </ul>
         </main>

         
   </div>

   <script>
    //  定义数据
    const data = [
        {num: 1, text: 'C(do)',src:"./audio/1.C(do).mp3"},
        {num: 2, text: 'D(re)',src:"./audio/2.D(re).mp3"},
        {num: 3, text: 'E(mi)',src:"./audio/3.E(mi).mp3"},
        {num: 4, text: 'F(fa)',src:"./audio/4.F(fa).mp3"},
        {num: 5, text: 'G(sol)',src:"./audio/5.G(sol).mp3"},
        {num: 6, text: 'A(la)',src:"./audio/6.A(la).mp3"},
        {num: 7, text: 'B(si)',src:"./audio/7.B(si).mp3"}
    ]

    // 获取相关的标签
    const audio = document.querySelector(".audio");
    const ul = document.querySelector(".ul");

    // 定义索引值 (查找音频文件)
    let index ;

    // 编写模板渲染函数
    const template = (arr) => {
        let str = "";
        for(let i = 0 ; i < arr.length ; i ++){
            str += `
                <li data-src="${arr[i].src}">
                    <div>${arr[i].num}</div>
                    <div>${arr[i].text}</div>
                </li>
            `
        }
        ul.innerHTML = str;
    }
   
    // 调用模板函数
    template(data);


    // 编写播放音频的函数
    const playFn = src  => {
        // 设置音频路径
        audio.src = src;
        // 播放音频
        audio.play();
    }

    // 事件函数作用域中使用 
    document.onkeydown = event => {
        // 获取键盘 1-7 按键对应的值
        const code = event.code;
        // console.log(code);
        // 根据键盘的值获取data中对应的数据 (得到索引值)
        switch(code){
            case "Digit1": 
              index = 0;
            break;
            case "Digit2": 
              index = 1;
            break;
            case "Digit3": 
              index = 2;
            break;
            case "Digit4": 
              index = 3;
            break;
            case "Digit5": 
              index = 4;
            break;
            case "Digit6": 
              index = 5;
            break;
            case "Digit7": 
              index = 6;
            break
        }

        // 用户按下的不是1-7的按键就终止代码
        if(index == undefined) return;

        // 获取所有的li标签
        const lis = ul.children;

        // 排他思想
        for(let i = 0 ; i < lis.length ; i ++){
            lis[i].className = "";
        }
        lis[index].className = "active";

        // 播放音频
        playFn(data[index].src);
    }

    // 获取所有的li标签
    const lis = ul.children;
    document.onkeyup = ()=> {
       
        // 排他思想
        for(let i = 0 ; i < lis.length ; i ++){
            lis[i].className = "";
        }

        index = undefined;
    }
	[...lis].forEach((btn,index)=>{
	    btn.onclick = ()=> {
		console.log(index)
			// 排他思想
			for(let i = 0 ; i < lis.length ; i ++){
				lis[i].className = "";
			}
			lis[index].className = "active";
			 // 播放音频
			playFn(data[index].src);
		}
	})
   </script>



</body>
</html>